@extends('Admin.index')
@section('css')
    <style>
        #layui-layer1 .layui-layer-setwin .layui-layer-close1{
            background-position: 1px -40px;
        }
    </style>

@endsection


@section('content')

    <div class="app-third-sidebar">
        <nav class="ui-nav " style="display: block;">
            <ul>
                <li>
                    <a href="/admin/permission"><span>权限</span></a>
                </li>
            </ul>
        </nav>
    </div>

    <div id="wrapper">

        <div class="row">
            <div class="col-lg-12">
                <div class="row">
                    <div class="col-md-2">
                        <a class="btn btn-success" role="button" onclick="Permission.edit(0)">添加权限</a>
                    </div>

                    <div class="col-md-10" >
                        <form class="form-inline" id="search-form" onsubmit="return false;">

                            <div class="form-group" style="margin-left: 5px;">
                                <select class="form-control reset-bootstrap-select" id="searchPermissionGroupID" name="searchPermissionGroupID">
                                    <option value="">请选择权限组</option>
                                </select>
                            </div>

                            <div class="input-group">
                                <input type="text" class="form-control" name="permissionName" placeholder="请输入权限名称">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" name="search" type="button">查询</button>
                                     <button class="btn btn-warning" name="to-reset" type="button">重置</button>
                                </span>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
        <br>

        <div class="row">

            <div class="col-lg-12">
                <div id="toolbar">

                </div>
                <table id="table"></table>
            </div>

        </div>

    </div>

@endsection


@section('js')

    <script>

        var bootstrap_table_ajax_url  = '/admin/permission/search';

        $('#table').bootstrapTable({
            classes: 'table table-hover', //bootstrap的表格样式
            sidePagination: 'server', //获取数据方式【从服务器获取数据】
            pagination: true, //分页
            height: $(window).height() - 200, //表格高度
            pageNumber: 1, //页码【第X页】
            pageSize: 10, //每页显示多少条数据
            queryParamsType: 'limit',
            queryParams: function (params) {
                var dt = E.getFormValues('search-form');
                $.extend(params, dt);
                return params;
            },

            url: bootstrap_table_ajax_url,//ajax链接
            sortName: 'permissionID', //排序字段
            sortOrder: 'DESC',//排序方式
            columns: [ //字段
                { title: '操作', field: 'operation', align: 'center', width: '100px' },
                { title: '权限号', field: 'permissionID', align: 'center', width: '100px' },
                { title: '权限名', field: 'permissionName', align: 'left', width: '150px'  },
                { title: '权限简称',  field: 'shortName', align: 'left', width: '90px' },
                { title: '权限组名',  field: 'permissionGroupName', align: 'center', width: '150px' },
                { title: '权限路径',  field: 'permissionRequest', align: 'left' },
                { title: '权限序号',  field: 'sort', align: 'left' ,sortable:true, width: '50px'}
            ]

        });

        var permissionGroup =  {!! $groups !!} ;

        if (  permissionGroup  ) {

            $.each( permissionGroup , function(i,n){
                var  html = '<option value="'+ n.group_id + '" >'+ n.group_name + '</option>';
                $('#searchPermissionGroupID').append(html);
            });


        }

        var Permission = {

            layer_index: 0,

            edit: function (uuid) {

                var html = '<form id="group-form" onsubmit="return false;" class="form-horizontal" role="form">';
                html += '<input type="hidden" name="uuid" id="uuid" value="0">';

                html += '<div class="user_father"><div class="form-group">';
                html += '<label class="col-sm-3 control-label" for="permissionGroupID"><span class="red pr5">*</span> <span>权限组</span>：</label>';
                html += '<div class="col-sm-8">';
                html += '<select class="form-control" id="permissionGroupID" name="permissionGroupID"><option value="">请选择权限组</option>';

                $.each( permissionGroup , function(i,n){
                    html += '<option value="'+ n.group_id + '" data_group_name="'+ n.group_name +'">'+ n.group_name + '</option>';
                });

                html += '</select></div>';
                html += '</div></div>';

                html += '<div class="form-group">';
                html += '<label class="col-sm-3 control-label" for="permissionID"><span class="red pr5">*</span> 权限号：</label>';
                html += '<div class="col-sm-8">';
                html += '<input class="form-control" type="text" id="permissionID" name="permissionID" maxlength="20" value="" placeholder="请输入权限号">';
                html += '</div>';
                html += '</div>';

                html += '<div class="form-group">';
                html += '<label class="col-sm-3 control-label" for="permissionName"><span class="red pr5">*</span> 权限名称：</label>';
                html += '<div class="col-sm-8">';
                html += '<input class="form-control" type="text" id="permissionName" name="permissionName" maxlength="20" value="" placeholder="请输入权限名称">';
                html += '</div>';
                html += '</div>';


                html += '<div class="form-group">';
                html += '<label class="col-sm-3 control-label" for="shortName"><span class="red pr5">*</span> 权限简称：</label>';
                html += '<div class="col-sm-8">';
                html += '<input class="form-control" type="text" id="shortName" name="shortName" placeholder="请输入权限简称">';
                html += '</div>';
                html += '</div>';

                html += '<div class="form-group">';
                html += '<label class="col-sm-3 control-label" for="sort"><span class="red pr5">*</span> 权限序号：</label>';
                html += '<div class="col-sm-8">';
                html += '<input class="form-control" type="text" id="sort" name="sort" placeholder="请输入权限序号">';
                html += '</div>';
                html += '</div>';

                html += '<div class="form-group">';
                html += '<label class="col-sm-3 control-label" for="permissionRequest"><span class="red pr5">*</span> 权限路径：</label>';
                html += '<div class="col-sm-8">';
                html += '<input class="form-control" type="text" id="permissionRequest" name="permissionRequest" value="" placeholder="请输入权限路径">';
                html += '</div>';
                html += '</div>';

                html += '<div class="form-group">';
                html += '<label class="col-sm-3 control-label" for="permissionRequest"><span class="red pr5">*</span> 权限类型：</label>';
                html += '<div class="col-sm-8">';
                html += '<label class="radio-inline"> <input type="radio" class="square-radio" name="permissionType" value="1" checked id="permissionType1"> 页面</label><label class="radio-inline"><input type="radio" class="square-radio" name="permissionType" value="2" id="permissionType2"> 编辑</label>';
                html += '</div>';
                html += '</div>';

                html += '</form>';

                this.layer_index = layer.open({
                    title: uuid == 0 ? '添加权限' : '修改权限',
                    type: 1,
                    offset: '50px',
                    area: ['450px','480px'] ,
                    scrollbar: false,
                    content: html,
                    btn: ['保存', '取消'],
                    yes: function () {

                        var dt = E.getFormValues('group-form');
                        dt.permissionGroupName = $('#permissionGroupID').find('option:selected').attr('data_group_name');

                        //验证单
                        if (dt.permissionGroupName == '') {
                            layer.alert('请选择权限组', {icon: 2, offset: '70px'});
                            return false;
                        }

                        if (dt.permissionID == '') {
                            layer.alert('请输入权限号', {icon: 2, offset: '70px'});
                            return false;
                        }

                        if ( isNaN(dt.permissionID) ){
                            layer.alert('权限号必须是数字', {icon: 2, offset: '70px'});
                            return false;
                        }

                        if (dt.permissionName == '') {
                            layer.alert('请输入权限名称', {icon: 2, offset: '70px'});
                            return false;
                        }

                        if (dt.shortName == '') {
                            layer.alert('请输入权限简称', {icon: 2, offset: '70px'});
                            return false;
                        }

                        if (dt.sort == '') {
                            layer.alert('请输入权限序号', {icon: 2, offset: '70px'});
                            return false;
                        }

                        if (dt.permissionRequest == '') {
                            layer.alert('请输入权限路径', {icon: 2, offset: '70px'});
                            return false;
                        }

                        $.ajax({
                            type: 'POST',
                            url: '/admin/permission/store',
                            data: dt,
                            success: function (res) {
                                if (res.code == 200) {
                                    layer.alert('权限保存成功', {icon: 1, offset: '70px', time: 1500});
                                    if (dt.uuid != 0) {  // 编辑
                                        layer.close(Permission.layer_index);
                                    } else {  //  新增
                                        $('#group-form').find('input,select').val('');  //  清空
                                        $('#permissionType1').attr('checked');
                                    }
                                    $('#table').bootstrapTable('refresh');
                                } else {
                                    layer.alert(res.message, {icon: 2, offset: '70px'});
                                }
                            }
                        });

                    }
                });

                $('#permissionID').focus();

                if (uuid != 0) {

                    $.ajax({
                        type: 'get',
                        url: '/admin/permission/detail/' + uuid,
                        success: function (res) {
                            if (res.code == 200) {
                                $('#uuid').val(res.data.uuid);
                                $('#permissionGroupID').val(res.data.permissionGroupID);
                                $('#permissionID').val(res.data.permissionID);
                                $('#permissionName').val(res.data.permissionName);
                                $('[name="shortName"]').val(res.data.shortName);
                                $('[name="sort"]').val(res.data.sort);
                                $('#permissionRequest').val(res.data.permissionRequest);
                                $('#permissionType'+ res.data.permissionType).iCheck('check');
                            }
                        }

                    });
                }

                //  checkbox.radio的check样式
                $('.square-radio').iCheck({
                    checkboxClass: 'icheckbox_square-blue',
                    radioClass: 'iradio_square-blue',
                    increaseArea: '20%' // optional
                });

            },

            del: function (uuid) {

                layer.confirm('您确认要删除该权限吗？',
                    {  icon: 3 , offset: '100px'},
                    function (index) {

                        layer.close(index);

                        $.ajax({
                            type: 'get',
                            url: '/admin/permission/delete/' + uuid,
                            success: function (res) {
                                if (res.code == 200) {
                                    layer.alert('权限删除成功', {icon: 1, offset: '70px', time: 1000});
                                    $('#table').bootstrapTable('refresh');
                                } else {
                                    layer.msg(res.message, {icon: 2, offset: '70px'});
                                }
                            }
                        });

                    });

            }


        };

        //下拉框插件
        $('#searchPermissionGroupID').selectpicker({
            liveSearch: true,
            maxOptions: 1
        });

    </script>

@endsection